class Banner {
    constructor(ele) {
        this.index = 0;
        this.t = null;
        this.ele = $(ele);
        this.oUl = this.ele.find('ul');
        this.oLi = this.ele.find('ul li');
        this.width = $(this.oLi[0]).width();
        this.OlLis = this.ele.find('ol li');
        this.flag = true;
    }
    autoPlay() {
        this.t = setInterval(() => {
            this.index++;
            this.showOne()
        }, 3000);
    }

    showOne() {
        this.flag = false;
        this.oUl.animate({
            left: -this.width * this.index
        }, () => {
            this.flag = true;
            if (this.index >= this.oLi.length - 1) {
                this.index = 0;
                this.oUl.css('left', 0)
            }
        })


        if (this.index >= this.oLi.length - 1) {
            $(this.OlLis).eq(0).addClass('on').siblings().removeClass('on')
        }
        else {
            $(this.OlLis).removeClass('on').eq(this.index).addClass('on');
        }
    }

    init() {
        const that = this;
        this.ele.on('click', 'ol li', function () {
            if (that.flag) {
                // clearInterval(that.t);   //flag可以点的时候关闭定时器
                that.index = $(this).index();
                that.showOne();
                that.autoPlay()
                clearInterval(that.t);   //再次关闭定时器
            }
        })


        this.ele.on('click', '.prev', () => {

            if (this.flag) {
                // clearInterval(this.t);
                if (this.index === 0) {
                    this.index = this.oLi.length - 1;
                    this.oUl.css('left', -this.index * this.width)
                }
                this.index--;
                that.showOne();
                that.autoPlay();
                clearInterval(this.t);  //再次关闭定时器
            }
        })

        this.ele.on('click', '.next', () => {
            if (this.flag) {
                // clearInterval(this.t);
                if (this.index === this.oLi.length - 1) {
                    this.index = 0;
                    this.oUl.css('left', -this.index * this.width)
                }
                this.index++;
                that.showOne();
                that.autoPlay();
                clearInterval(this.t);  //再次关闭定时器
            }
        })
    }

}
const lun = new Banner('.banner_lb');
lun.autoPlay()
lun.init()